import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_redis/controller/theme_controller.dart';
import 'package:flutter_redis/routes/routes.dart';
import 'package:get/get.dart';
import '../controller/redis_controller.dart';

class HomePage extends StatelessWidget {
  final RedisController redisController = Get.put(RedisController());

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final ThemeController themeController = Get.put(ThemeController());
    return Scaffold(
      appBar: AppBar(
        title: const Text('Redis'),
        systemOverlayStyle: SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.transparent,
        ),
        actions: [
          IconButton(
            onPressed: () => Get.toNamed(AppRoutes.theme),
            icon: const Icon(Icons.settings),
          ),
        ],
      ),
      body: Obx(() {
        final configs = redisController.configs;
        if (configs.isEmpty) {
          return const Center(
            child: Text(
              '还没有保存的Redis连接配置',
              style: TextStyle(color: Colors.grey, fontSize: 16),
            ),
          );
        }
        return ListView.separated(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
          itemCount: configs.length,
          separatorBuilder: (context, index) => const SizedBox(height: 8),
          itemBuilder: (context, index) {
            final config = configs[index];
            return Card(
              elevation: 2,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(6),
              ),
              child: ListTile(
                contentPadding: const EdgeInsets.symmetric(
                  horizontal: 18,
                  vertical: 8,
                ),
                leading: Obx(
                  () => CircleAvatar(
                    backgroundColor: themeController.primaryColor.value
                        .withAlpha(config.isConnected ? 255 : 100),
                    child: Icon(
                      config.isConnected ? Icons.link : Icons.link_off,
                      color: Colors.white,
                    ),
                  ),
                ),
                title: Text(
                  config.name,
                  style: const TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 16,
                  ),
                ),
                subtitle: Text(
                  '${config.host}:${config.port}',
                  style: const TextStyle(fontSize: 13),
                ),
                trailing: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    IconButton(
                      icon: const Icon(
                        Icons.delete_outline,
                        color: Colors.redAccent,
                      ),
                      onPressed: () {
                        Get.dialog(
                          AlertDialog(
                            title: const Text('确认删除'),
                            content: Text('确定要删除连接 "${config.name}" 吗？'),
                            actions: [
                              TextButton(
                                onPressed: () => Get.back(),
                                child: const Text('取消'),
                              ),
                              TextButton(
                                onPressed: () {
                                  redisController.deleteConfig(config.id!);
                                  Get.back();
                                },
                                child: const Text(
                                  '删除',
                                  style: TextStyle(color: Colors.redAccent),
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ],
                ),
                onTap: () {
                  Get.toNamed(AppRoutes.query, arguments: config);
                },
              ),
            );
          },
        );
      }),
      floatingActionButton: Obx(
        () => FloatingActionButton(
          onPressed: () => Get.toNamed(AppRoutes.config),
          backgroundColor: themeController.primaryColor.value,
          child: const Icon(Icons.add, color: Colors.white),
        ),
      ),
    );
  }
}
